<template>
  <div class="air">
    <!-- 健康洁净机 -->
    <el-row :gutter="20">
        <el-col :span="24" class="paddCol" >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                  <span :style="this.alarmstate == 0 ? '':'color:#ea2e2e'"><i class="el-icon-menu"></i> <span class="shebeiname">{{this.data.name}}</span></span>
              </div>
              <div class="temp_card">
                <div class="temp_data">
                  <div class="temp_datal">
                    <div class="airfiter_data">
                      <div class="airliter_data">
                        <div class="airliter_data">
                          <div class="airfiter_pm">
                            <div  class="airfiter_pm_icon">
                              <svg aria-hidden="true" class="icon">
                                <use xlink:href="#icon-icon-co" />
                              </svg>
                            </div>
                            <p>{{ this.data.unit[2].value.toFixed(0) }} <span>{{ this.data.unit[2].flag }}</span> </p>
                          </div>
                          <div class="airfiter_pm">
                            <div class="airfiter_pm_icon">
                              <svg aria-hidden="true" class="icon icon_temp">
                                <use xlink:href="#icon-wendu" />
                              </svg>
                            </div>
                            <p>{{ this.data.unit[3].value.toFixed(1) }} <span>{{ this.data.unit[3].flag }}</span> </p>
                          </div>
                        </div>
                      </div>
                      <div class="airliter_setflex">
                        <div class="airliter_left">
                          <div><el-button :class="this.open == 1 ?'set_humi':'set_humi_gray'">开机</el-button></div>
                          <div><el-button :class="this.open == 0 ?'set_humi':'set_humi_gray'">关机</el-button></div>
                        </div>
                        <div class="airliter_right">
                          <div class="airliter_right_flex">
                            <div><el-button :class="this.speed == 0 ?'set_humi2':'set_humi_gray2'">停止</el-button></div>
                            <div><el-button :class="this.speed == 1 ?'set_humi2':'set_humi_gray2'">低速</el-button></div>
                          </div>
                          <div class="airliter_right_flex">
                            <div><el-button :class="this.speed == 2 ?'set_humi2':'set_humi_gray2'">中速</el-button></div>
                            <div><el-button :class="this.speed == 3 ?'set_humi2':'set_humi_gray2'">高速</el-button></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="temp_datal_top">
                      <div class="temp_warning_mode">
                        <div class="temp_peak_name">
                          <i class="el-icon-message-solid"></i>
                          报警数据
                        </div>
                        <div class="temp_warning">
                          <p>
                            <span class="temp_warning_title">报警数量：</span>
                            <span class="temp_warning_data">{{ this.errorcount }}</span>
                          </p>
                          <p>
                            <span class="temp_warning_title">数值报警：</span>
                            <span class="temp_warning_data">{{ this.valueerror }}</span>
                          </p>
                          <p>
                            <span class="temp_warning_title">链路报警：</span>
                            <span class="temp_warning_data">{{ this.connecterror }}</span>
                          </p>
                        </div>
                      </div>
                      <div class="temp_time_mode">
                        <div class="temp_peak_name">
                          <i class="el-icon-time"></i>
                          时间统计
                        </div>
                        <div class="temp_time">
                          <div class="temp_time_line">
                            <p class="temp_warning_title">首次上线：</p>
                            <p class="temp_time_year">{{ this.firstconnecttimeYear }} </p> 
                            <p class="temp_time_hour">{{ this.firstconnecttimeHour}}</p>
                          </div>
                          <div class="temp_time_line">
                            <p class="temp_warning_title">最近上线：</p>
                            <p class="temp_time_year">{{ this.connecttimeYear }} </p>
                            <p class="temp_time_hour">{{ this.connecttimeHour }}</p>
                          </div>
                          <div class="temp_time_line">
                            <p class="temp_warning_title">累计时长：</p>
                            <p class="temp_time_h"> {{this.totaltime}} </p> <span class="temp_time_s"> h</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="temp_datar">
                    <div class="k8s_echart">
                        <div class="temp_pie_name">
                          <svg class="icon chart_icon" aria-hidden="true">
                              <use xlink:href="#icon-shujuquxianzoushiqushitubiaoshangshengxianxing"></use>
                          </svg>
                          数据分析
                        </div>
                        <div class="temp_echart_top" style="margin-top: 10px;">
                          <div class="tempChart">
                            <div class="tempChart_title">
                              <div class="tempChart_tishi1"></div>
                              周CO₂
                            </div>
                            <div class="echarttong">
                              <echars :info="info" :id="2" :height="height" :color="color0" :background="background0" :reasMax="coreasMax" :reasMin="coreasMin" :fanwei="604800" ref="childechart0"></echars>
                            </div>
                          </div>
                          <div class="tempChart">
                            <div class="tempChart_title">
                              <div class="tempChart_tishi2"></div>
                              月CO₂
                            </div>
                            <div class="echarttong">
                              <echars :info="info" :id="2" :height="height" :color="color1" :background="background1" :reasMax="coreasMax" :reasMin="coreasMin" :fanwei="2419200" ref="childechart1"></echars>
                            </div>
                          </div>
                        </div>
                        <div class="temp_echart_top">
                          <div class="tempChart">
                            <div class="tempChart_title">
                              <div class="tempChart_tishi3"></div>
                              月温度
                            </div>
                            <div class="echarttong">
                              <echars :info="info" :id="3" :height="height" :color="color2" :background="background2" :reasMax="tempreasMax" :reasMin="tempreasMin" :fanwei="604800" ref="childechart2"></echars>
                            </div>
                          </div>
                          <div class="tempChart">
                            <div class="tempChart_title">
                              <div class="tempChart_tishi4"></div>
                              月温度
                            </div>
                            <div class="echarttong">
                              <echars :info="info" :id="3" :height="height" :color="color3" :background="background3" :reasMax="tempreasMax" :reasMin="tempreasMin" :fanwei="2419200" ref="childechart3"></echars>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="temp_datal_bottom">
                        <div class="temp_peak_mode">
                          <div class="temp_peak_name">
                            <i class="el-icon-s-data"></i>
                            峰值数据（{{this.data.unit[2].name}}）
                          </div>
                          <div class="temp_peak">
                            <div class="temp_peak_left"></div>
                            <div class="temp_peak_right" >
                              <div class="temp_peak_flex">
                                <div class="temp_peak_humi_max"></div>
                                <div class="temp_peak_data"><span>{{this.shiMax.toFixed(0)}}</span><span class="temp_peak_data_flag">{{this.data.unit[2].flag}}</span></div>
                              </div>
                              <div class="temp_peak_flex">
                                <div class="temp_peak_humi_min"></div>
                                <div class="temp_peak_data"><span>{{this.shiMin.toFixed(0)}}</span><span class="temp_peak_data_flag">{{this.data.unit[2].flag}}</span></div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="temp_pie_mode">
                          <div class="temp_pie_name">
                            <svg class="icon chart_icon" aria-hidden="true">
                                <use xlink:href="#icon-chucun"></use>
                            </svg>
                            <!-- <i class="el-icon-pie-chart"></i> -->
                            储存空间
                          </div>
                          <div class="chart_pie" ref="chart4"></div>
                          <div class="chucun_disk"><span>占用空间：</span><span>{{ this.valuedisk }}{{this.valuediskFlag}}</span></div>
                        </div>
                      </div>
                  </div>
                </div>
                
              </div>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import $ from 'jquery';
import * as echarts from 'echarts';
import echars from '../overview/echars.vue';
export default {
  components:{echars},
  props: ["msg"],
  data() {
    return {
      alarmstate:0,//在线离线
      timeGetData:'',//接口方法的定时器
      data: "", //当前设备数据
      dataor:1,//判断接口是否成功，1表示有返回成功，0表示失败，3之内无返回就置0表示失败
      // 峰值
      shiMax:0,
      shiMin:0,
      // 控制项
      openNum:0,//当前点击键值计时
      openGetData:'',//当前点击键值定时器
      open:0,//开关机
      speed:0,//风速 0高速 1低速
      //属性数据
      firstconnecttimeYear:'',//首次上线年月日
      firstconnecttimeHour:'',//首次上线时分
      connecttimeYear:'',//最近上线年月日
      connecttimeHour:'',//最近上线时分
      totaltime:0,//累计运行时间
      errorcount:0,//报警总数量
      valueerror:0,//数值报警
      connecterror:0,//链路报警
      valuecount:0,//累计记录条数
      recordcount:0,//剩余记录条数
      valuedisk:0,//存储空间磁盘容量比特
      valuediskFlag:'',//存储空间磁盘容量单位
      // 曲线内容---
      tempreasMax:0,//曲线合理区间，高低限范围
      tempreasMin:0,//曲线合理区间，高低限范围
      coreasMax:0,//曲线合理区间，高低限范围
      coreasMin:0,//曲线合理区间，高低限范围
      color0:'#4fe33b',
      color1:'#fac958',
      color2:'#1ab1ff',
      color3:'#ef6669',
      background0:'rgba(197,234,180,0.2)',
      background1:'rgba(250,201,88,0.2)',
      background2:'rgba(26,177,255,0.2)',
      background3:'rgba(239,102,105,0.2)',
      historyNum:0,
      height:'250',
      // 曲线结束---
      localname:'',//本地储存名称
    };
  },
  mounted() {
  },
  created() {
    // 判断是否是直接访问当前设备页面
    const url = window.location.href;
    const over = /#.*/; // 正则表达式用于匹配URL中的路径部分
    const pathMatch = url.match(over); // 匹配URL中的路径部分
    if (pathMatch && pathMatch[0].startsWith('#/overview')) {
      this.localname = "当前设备编号"
    }else if(pathMatch && pathMatch[0].startsWith('#/overview2')){
      this.localname = "6.0展示设备卡片"
    }
    // 曲线内容---
    this.info = JSON.parse(localStorage.getItem(this.localname))
    this.$nextTick(() => {
      this.$refs.childechart0.getCharts0()
      this.$refs.childechart1.getCharts0()
      this.$refs.childechart2.getCharts0()
      this.$refs.childechart3.getCharts0()
    })
    // 曲线内容---
    this.data = JSON.parse(localStorage.getItem("menuDataJson"))
    this.data.unit[0].name = "CO₂"
    this.data.unit[1].name = "TVOC"
    this.data.unit[2].name = "甲醛"
    this.data.unit[3].name = "PM2.5"
    this.data.unit[4].name = "PM10"
    this.data.unit[5].name = "温度"
    this.data.unit[6].name = "湿度"
    this.getData(JSON.parse(localStorage.getItem(this.localname)))
    this.getDataStart()
    this.$nextTick(() => {
      this.getCharts4()
    })
  },
  methods: {
    //重新定时走接口
    getDataStart(){
      this.$nextTick(() => {
          this.timeGetData = setInterval(() => {
            if(this.dataor == 0){ //接口失败提示
              this.$message({
                message: '服务器访问失败',
                type: 'error',
                duration: 1000
              });
            }
            this.getData(JSON.parse(localStorage.getItem(this.localname)))
            this.dataor = 0
          }, 3000); 
      })
    },
    getData(info){
      // 曲线内容---
      this.info = info
      // 曲线内容---
      if(info.uid == null || info.uid == "null"){//清空缓存第一次进入时找不到info.uid，页面为空页面的处理
        info.uid = 0
      }
      var params = {
          "getdevinfo":[
            {
              "uid": info.uid,
              "type": info.type,
              "addr": info.addr,
              "unittype":"id-name-ready-value-flag-max-min-alarmhvalue-alarmhhvalue-alarmlvalue-alarmllvalue-valuemax-valuemin"
            }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
        this.dataor = 1// 接口成功置1
        if(res.data.getdevinfo == undefined){ //数据返回不全失败提示
          this.$message({
            message: '服务器访问失败',
            type: 'error',
            duration: 1000
          });
        }else{
          this.data = res.data.getdevinfo[0];
          this.alarmstate = res.data.getdevinfo[0].alarmstate
          if(this.openNum == 0){//不处于计时状态，正常读取真实状态
            this.open = this.data.unit[0].value
            this.speed = this.data.unit[1].value
          }
          // 上次上线时间
          this.firstconnecttimeYear = this.formatDate(this.data.firstconnecttime*1000, 'YYYY-MM-DD')
          this.firstconnecttimeHour = this.formatDate(this.data.firstconnecttime*1000, 'H:m')
          // 最近上线时间
          this.connecttimeYear = this.formatDate(this.data.connecttime*1000, 'YYYY-MM-DD')
          this.connecttimeHour = this.formatDate(this.data.connecttime*1000, 'H:m')
          //累计运行时间 拿到的分钟转成小时
          this.totaltime = (this.data.totaltime/60).toFixed(0)
          //故障累计总条数
          this.errorcount = this.data.errorcount
          // 数据报警累计条数
          this.valueerror = this.data.valueerror
          //离线故障累计条数
          this.connecterror = this.data.connecterror
          //历史记录已记录条数
          this.valuecount = this.data.valuecount
          //剩余记录条数
          this.recordcount = this.data.recordmax-this.data.valuecount

          // 磁盘容量计算
          var sk = 0;
          if(this.data.valuedisk == 0){ //空间为0
            this.valuedisk = 0
            this.valuediskFlag = 'MB'
          }else if(this.data.valuedisk > 0){ //空间大于0
            sk = this.data.valuedisk/8
            if(sk >= 1){//bit或kb
              sk = sk/1024
              if(sk >= 1){
                sk = sk/1024
                if(sk >= 1){//kb或mb
                  sk = sk/1024
                  if(sk >= 1){//mb或gb
                    sk = sk/1024
                    if(sk >= 1){//gb或tb
                      sk = sk/1024
                      if(sk >= 1){
                      }else{//TB展示
                        this.valuedisk = (sk*1024).toFixed(1)
                        this.valuediskFlag = 'TB'
                      }
                    }else{//GB展示
                      this.valuedisk = (sk*1024).toFixed(1)
                      this.valuediskFlag = 'GB'
                    }
                  }else{//MB展示
                    this.valuedisk = (sk*1024).toFixed(1)
                    this.valuediskFlag = 'MB'
                  }
                }else{//KB展示
                  this.valuedisk = (sk*1024).toFixed(1)
                  this.valuediskFlag = 'KB'
                }
              }else{//B展示
                this.valuedisk = (sk*1024).toFixed(1)
                this.valuediskFlag = 'B'
              }
            }else{//bit展示
              this.valuedisk = this.data.valuedisk.toFixed(1)
              this.valuediskFlag = 'BIT'
            }
          }
          console.log(info.uid)
          // 曲线内容---
          //计算曲线合理区间（高低限）
          this.tempreasMax = (this.data.unit[3].alarmhvalue+this.data.unit[3].alarmhhvalue)/2
          this.tempreasMin = (this.data.unit[3].alarmlvalue+this.data.unit[3].alarmllvalue)/2
          this.coreasMax = (this.data.unit[2].alarmhvalue+this.data.unit[2].alarmhhvalue)/2
          this.coreasMin = (this.data.unit[2].alarmlvalue+this.data.unit[2].alarmllvalue)/2
          if(this.historyNum == 0){
            this.historyNum++
            this.getHisData()
            console.log('获取一次历史数据')
          }
          // 曲线结束---
          //峰值计算
          if(this.data.unit[2].valuemin == undefined || this.data.unit[2].valuemin == null){
            this.data.unit[2].valuemin = 0
          }
          if(this.data.unit[2].valuemax == undefined || this.data.unit[2].valuemax == null){
            this.data.unit[2].valuemax = 0
          }
          this.shiMin = this.data.unit[2].valuemin
          var shiMinB = (this.shiMin/1000)*250 // 范围0~500取百分比，取占总长度150px的距离
          $('.temp_peak_humi_min').css('width',shiMinB+'px')
          this.shiMax = this.data.unit[2].valuemax
          var shiMaxB = (this.shiMax/1000)*250 // 范围0~500取百分比，取占总长度150px的距离
          $('.temp_peak_humi_max').css('width',shiMaxB+'px')
          this.getCharts4()
        }
      })
    },
    //历史曲线 
    getHisData(){
      this.$nextTick(() => {
        this.$refs.childechart0.getHisData()
        this.$refs.childechart1.getHisData()
        this.$refs.childechart2.getHisData()
        this.$refs.childechart3.getHisData()
      })
    },
    switchOpen(id,mode){
        var st = 0;
        if(id == 33){ //开关机
          if(this.open == 0){
            st = 1
          }else if(this.open == 1){
            st = 0
          }else{
            return false;
          }
          this.open = st
        }else{
          if(this.open == 1){
            if(id == 1){ //风速
              if(mode == 0){ //停止
                st = 0
              }else if(mode == 1){ //低速
                st = 1
              }else if(mode == 2){ //中速
                st = 2
              }else if(mode == 3){ //高速
                st = 3
              }else{
                return false;
              }
              this.speed = st
            }else{
              return false;
            }
          }else{
            this.$message({
              message: '设备未开机',
              type: 'error',
              duration: 1000
            });
            return false;
          }
        }
      var params = {
          "setdevinfo":[
              {
                  "uid": this.info.uid,
                  "type": this.info.type,
                  "addr": this.info.addr,
                  "unit":[
                    {
                      id: id,
                      value: st
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.openNum = 0
      clearInterval(this.openGetData);
      this.openGetData = null;
      this.openGetData = setInterval(() => { //开关机、模式、净化模式、风速同时判断，都一致表示刚刚下发成功（可能会有在设备上操作导致十防上判断到不一致触发此方法导致的延迟事件，最多延迟10秒）
        if((this.data.unit[0].value != this.open || this.data.unit[1].value != this.speed) && (this.openNum <= 5)){
            this.openNum++
        }else{//超过10秒返回的值和当前的值不一样 或者已读到当前状态修改成功，就结束循环读取真实状态
          this.open = this.data.unit[0].value
          this.speed = this.data.unit[1].value
          this.openNum = 0
          clearInterval(this.openGetData);
          this.openGetData = null;
        }
      }, 1000); 
      this.$http.post(this.$baseUrl, params).then((res) => {
          if(res.data.result == 'ok'){
              
          }else{
              this.$notify({
                  title: '操作失败',
                  type: 'warning',
                  duration: 1500
              });
          }
      });
    },
    getCharts4(){
      if (this.chart4 == null) {
        this.chart4 = echarts.init(this.$refs.chart4);
      }
      
      var option = {
        title: {
          show:false,
          // text: '储存容量',
          // subtext: '储存容量',
          // top:30,
          // textStyle: {
          //   color: '#ccc'
          // },
          // left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        series: [
          {
            name: '储存容量',
            type: 'pie',
            radius: '50%',
            // center: ['50%', '50%'],
            label: {
              color: '#fff',
              formatter:function(data){
	              return `${data.name} `
              }
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 5,
              normal: {
                color: function (colors) {
                  var colorList = [
                    '#36ad91',
                    '#7ec8b9',
                  ];
                  return colorList[colors.dataIndex];
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            data: [
            { 
                value: this.valuecount, 
                name: '累计数量',
              },
              { 
                value: this.recordcount, 
                name: '剩余数量',
              },
            ],
          },
          {//重复为了既在中间显示百分比，也拉出边线来显示名称和值
            name: '储存容量',
            type: 'pie',
            radius: '50%',
            label: {
              color: '#fff',
              normal: {
                    show: true,
                    position: 'inside',
                    formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
                   textStyle : {                   
                      align : 'center',
                      baseline : 'middle',
                      fontFamily : '微软雅黑',
                      fontSize : 15,
                      color:'#fff',
                      fontWeight : 'bolder'
                    }
                },
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 5,
              normal: {
                color: function (colors) {
                  var colorList = [
                    '#36ad91',
                    '#7ec8b9',
                  ];
                  return colorList[colors.dataIndex];
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            data: [
            { 
                value: this.valuecount, 
                name: '累计数量 ',
                itemStyle: {
                  borderColor: '#ffffff',
                  borderWidth: 2,
                } 
              },
              { 
                value: this.recordcount, 
                name: '剩余数量',
                itemStyle: {
                  borderColor: '#ffffff',
                  borderWidth: 2,
                } 
              },
            ],
          }
        ]
      };
      this.chart4.setOption(option);
    },
  },
  // 清除定时器
    beforeDestroy() {
        clearInterval(this.timeGetData);
        this.timeGetData = null;
    },
};
</script>

<style scoped>
.el-card {
  background: none;
  color: #fff;
  border: 1px solid rgba(89, 129, 165, 0.4);
}
/deep/ .el-card__header {
  background: rgba(89, 129, 165, 0.2);
  padding: 16px 20px;
  border-bottom: none;
}
.box-card {
  /* overflow: hidden; */
}
.temp_card{
  height: 850px;
}
.clearfix{
  font-size: 18px;
}
.shebeiname{
  font-weight: bold;
}
/* 框架 */
.temp_data{
  display: flex;
  height: 805px;
}
.temp_datal{
  width: 650px;
}
.temp_datar{
  width: 861px;
  margin-left: 20px;
}
.temp_datal_top{
  display: flex;
}
/* 数据 */
.airfiter_data{
  width: 650px;
  height: 560px;
}
.airliter_data{
  width: 650px;
  height: 350px;
  padding-top: 40px;
  margin-right: 45px;
  display: flex;
  justify-content: space-around;
}
.airfiter_pm_icon{
  width: 100px;
  height: 130px;
}
.airfiter_pm{
  height: 120px;
  /* padding-left: 30px; */
}
.airfiter_pm .icon{
  font-size: 120px;
}
.airfiter_pm .icon_temp{
  font-size: 100px;
  position: relative;
  top: 10px;
}
.airfiter_pm p{
  font-size: 40px;
  margin-left: 15px;
  color:#81ecf3;
}
.airfiter_pm p span{
  font-size: 18px;
  color: #fff;
}
.airliter_setflex{
  display: flex;
}
.airliter_left{
  width: 300px;
  text-align: center;
}
.airliter_right_flex{
  width: 250px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-around;
}
.airliter_right{
  width: 250px;
}
.airfiter_set{
  display: flex;
  padding-top: 40px;
  padding-left: 20px;
}
.set_humi{
  background-color: #5183b1db !important;
  color: #fff;
  font-size: 18px;
  margin-bottom: 30px;
}
.set_humi2{
  background-color: #5183b1db !important;
  color: #fff;
  font-size: 18px;
  margin-right: 40px;
}
.set_humi_gray{
  background-color: #90909070 !important;
  color: #fff;
  font-size: 18px;
  margin-bottom: 30px;
}
.set_humi_gray2{
  background-color: #90909070 !important;
  color: #fff;
  font-size: 18px;
  margin-right: 30px;
}
.set_humi_gray:hover{
  background-color: #5183b1db !important;
}
.set_humi:hover{
  background-color: #43607b7a !important;
}
.set_humi_gray2:hover{
  background-color: #5183b1db !important;
}
.set_humi2:hover{
  background-color: #43607b7a !important;
}
/deep/ .el-button:active, .el-button:focus, .el-button:hover{
  border-color: #fff !important;
  color: #fff !important;
}
/* 报警 */
.temp_warning_mode{
  width: 250px;
  height: 260px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 10px;
  background: #0000002b;
  margin-bottom: 20px;
  margin-right: 20px;
}
.temp_warning{
  margin-top: 30px;
  margin-left: 40px;
}
.temp_warning p{
  margin-bottom: 25px;
}
.temp_warning_title{
  color: #d4d3d3;
}
.temp_warning_data{
  font-family: electronicFont;
  font-size: 34px;
  color: #ffb50b;
}
/* 在线时间 */
.temp_time_mode{
  width: 380px;
  height: 260px;
  padding-top: 20px;
  border-radius: 10px;
  background: #0000002b;
  margin-bottom: 20px;
}
.temp_time{
  margin-top: 30px;
  margin-left: 40px;
}
.temp_time_line{
  margin-bottom: 32px;
  position: relative;
  top: 11px;
  display: flex;
}
.temp_time{
  margin-right: 30px;
  color: #d4d3d3;
}
.temp_time .temp_warning_title{
  width: 90px;
}
.temp_time_year{
  width: 160px;
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
}
.temp_time_hour{
  width: 65px;
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
}
.temp_time_h{
  font-family: electronicFont;
  font-size: 28px;
  color: #5eceff;
  position: relative;
  top: -5px;
}
.temp_time_s{
  color: #5eceff;
  margin-left: 5px;
}
/* 曲线 */
.k8s_echart{
  width: 861px;
  height: 600px;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  background: #0000002b;
}
.temp_pie_name{
  font-size: 18px;
  padding-top: 20px;
  padding-left: 30px;
}
.chart_icon{
  font-size: 20px;
}
.temp_echart_top{
  display: flex;
  margin-left: 10px;
}
.tempChart{
  width: 431px;
  position: relative;
  margin-top: 20px;
}
.tempChart_title{
  width: 100px;
  position: absolute;
  top: 20px;
  right: 22px;
  display: flex;
  align-items: center;
}
.tempChart_tishi1{
  width: 25px;
  height: 10px;
  background: #4fe33b;
  margin-right: 5px;
}
.tempChart_tishi2{
  width: 25px;
  height: 10px;
  background: #fac958;
  margin-right: 5px;
}
.tempChart_tishi3{
  width: 25px;
  height: 10px;
  background: #1ab1ff;
  margin-right: 5px;
}
.tempChart_tishi4{
  width: 25px;
  height: 10px;
  background: #ef6669;
  margin-right: 5px;
}
.chart_detail {
  width: 100%;
  height: 250px;
  position: relative;
}
/* 图表统计 */
.temp_datal_bottom{
  width: 861px;
  display: flex;
}
/* 峰值 */
.temp_peak_mode{
  width: 420px;
  height: 190px;
  padding-top: 20px;
  border-radius: 10px;
  background: #0000002b;
  margin-right: 20px;
}
.temp_peak_name{
  width: 100%;
  font-size: 18px;
  margin-left: 30px;
}
.temp_peak{
  display: flex;
  margin-top: 15px;
  margin-left: 35px;
}
.temp_peak_left{
  height: 110px;
  width: 1px;
  background: #d4d3d3;
}
.temp_peak_right{
  height: 110px;
  width: 330px;
  padding-top: 13px;
}
.temp_peak_flex{
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  transform-origin: left top;
  transition: transform 1s;
  cursor: pointer;
}
.temp_peak_flex:hover{
  transform: scale(1.2);
}
.temp_peak_flex:last-child{
  margin-bottom: 0px;
}
.temp_peak_humi_max{
  width: 0px;
  height: 30px;
  transition: width 1s;
  background: linear-gradient(to right,#b5e5c2,#47b967);
}
.temp_peak_humi_min{
  width: 0px;
  height: 30px;
  transition: width 1s;
  background: linear-gradient(to right,#b5e5c2,#47b967);
}
.temp_peak_data{
  margin-left: 10px;
  text-align: center;
}
.temp_peak_data_flag{
  font-size: 12px;
  color: #969696;
  margin-left: 5px;
}
/* 储存空间 */
.temp_pie_mode{
  width: 420px;
  height: 190px;
  border-radius: 10px;
  background: #0000002b;
  position: relative;
}
.temp_pie_name{
  font-size: 18px;
  padding-top: 20px;
  padding-left: 30px;
}
.chart_pie{
  width: 400px;
  height: 190px;
  position: relative;
  top: -20px;
}
.chucun_disk{
  position: absolute;
  top: 20px;
  right: 30px;
}
</style>